<template>
  <div>
    <div class="topBox">
      <h1>毒鸡汤</h1>
      <button><span>♥</span> 点赞(126555)</button>
    </div>
    <div class="center">
      <h1 class="sentence" style="font-size: 50px;display:block;">有钱了不起啊？有钱，真的了不起。</h1>
      <button>再来一碗</button>
    </div>
    <div class="footer">
      <div class="footer-nav">
        <a href="#">关于</a><span>-</span> <a href="#">反馈</a><span>-</span>
        <a href="#">赞赏</a><span>-</span>
        <a href="#">小程序</a>
        <span>-</span><a href="#">文章</a><span>-</span>
        <a href="#">会员</a>
      </div>
      <p>
        Copyright © 2022 蛙蛙在线工具 版权所有
        <a href="#">粤ICP备18006158号</a>
      </p>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.topBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 86%;
  margin: 0 auto;
  padding: 1.7rem 0;
}
h1 {
  font-size: 1.3rem;
  font-weight: normal;
}
button {
  font-size: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  padding: 3px 5px;
  cursor: pointer;
  color: #666;
}
span {
  font-size: 1rem;
  color: rgb(175, 68, 68);
}
.footer {
  color: #777;
  text-align: center;
  margin-top: 16px;
  padding: 2rem 0;
  width: 80%;
  margin: 0 auto;
}
.footer-nav {
  border-top: 1px solid #eee;
  line-height: 2;
  padding-top: 1rem;
  font-size: 0.9rem;
}
a:link,
a:visited {
  text-decoration: none;
  color: #333;
}
.footer-nav span {
  padding: 0 0.4rem;
}
.footer p {
  font-size: 0.75rem;
  padding-top: 0.3rem;
}
.center {
  text-align: center;
}
.sentence {
  white-space: nowrap;
  display: inline-block;
  font-size: 40px;
  font-weight: normal;
}
.title,
.author {
  font-size: 0.75rem;
  line-height: 1.8;
  color: #888;
  padding: 0.2rem 0;
}
button {
  margin-top: 48px;
  color: #fff;
  background-color: #28a745;
  border: 1px solid #28a745;
  border-radius: 18px;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  padding: 0.375rem 0.75rem;
  font-size: 0.9rem;
  height: 2.25rem;
  line-height: 1;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
</style>